<template>
    <div>
        <div class="center-all-img clearfix">
            <div class="income-title">
                <van-row>
                    <van-col span="8">
                        <img class="fl icon_return" src="../../assets/image/center/icon_return.png" alt="" @click="$router.back(-1)">
                    </van-col>
                    <van-col span="8" class="text-align-c font-36">提现</van-col>
                    <van-col span="8" class="text-align-r">
                        <router-link tag="span" class="font-3" :to="{name:'records2',params:{recordsId2:'1111'}}">交易记录</router-link>
                    </van-col>
                </van-row>
            </div>
        </div>
        <div class="balance-box clearfix">
            <ul class="clearfix balance-ul">
                <li class="clearfix font-3 text-align-l" v-if="checked==0">
                    支付宝账号
                    <input class="fr text-align-r" type="text" placeholder="请输入支付宝账号" v-model="fetchAccount" @input="checkFetchAccount">
                </li>
                <li class="clearfix font-3 text-align-l" v-else>
                    支付宝账号：<span class="fliexData">{{fetchAccount}}</span>
                    <span class="edit-icon color-999899" @click="editPop()">
                        <img src="../../assets/image/center/icon_edit@2x.png" alt="">
                        <em>修改</em> 
                    </span>                   
                </li>
                <li class="clearfix font-3 text-align-l border-bottom" v-if="checked==0">
                    真实姓名
                    <input class="fr text-align-r" type="text" placeholder="请输入支付宝真实姓名" v-model="personName">                    
                </li>
                <li class="clearfix font-3 text-align-l border-bottom" v-else>
                    真实姓名：<span class="fliexData">{{personName}}</span>                   
                </li>
                <li class="clearfix font-3 text-align-l color-999899"  v-if="type==41">
                    可提取金额
                    <input class="fr text-align-r color-323333" type="text" readonly="readonly" v-model="canCarry1">
                </li>
                <li class="clearfix font-3 text-align-l color-999899"  v-if="type==40">
                    可提取金额
                    <input class="fr text-align-r color-323333" type="text" readonly="readonly" v-model="canCarry">
                </li>
                <li class="clearfix font-3 text-align-l color-999899">
                    申请提现金额
                    <input class="fr text-align-r color-323333" type="number" v-model="money" placeholder="请输入提现金额" @input="numMoney(),getCharge()">
                </li>
                <li class="clearfix font-3 text-align-l color-999899">
                    手续费
                    <input class="fr text-align-r color-323333" type="text" readonly="readonly" v-model="charge">
                </li>
                <li class="clearfix font-3 text-align-l color-999899  border-bottom">
                    到账金额
                    <input class="fr text-align-r color-323333" type="text" readonly="readonly" v-model="finalMoney">
                </li>
            </ul>
            <div class="wxts clearfix">
                <span>温馨提示：</span>
                <span>1、单次提现金额不得少于100元，充值余额不可提现</span>
                <span>2、每日提现上线金额为10000元，提现后3个工作日内到账</span>
                <span>3、如有提现相关问题，请联系在线客服进行处理，客服在线时间：周一至周五9:00-18:00，节假日顺延。</span>
            </div>
            <van-tabbar>
                <span class="fabu-dynamic text-align-c" @click="fetchOut()">提交申请</span>
            </van-tabbar>
        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import moneyTopUpVue from './moneyTopUp.vue';
import {Toast, Dialog} from 'vant'
export default {
    data(){
        return{
            type:this.$route.query.type,    //提现类型 41：余额，40：收入
            canCarry:'',    //收入可提现的金额
            canCarry1:'',   //余额可提现的金额
            money:'',       //用户输入的提现的金额
            fetchAccount:'', //支付宝账号
            charge:0 ,      //提现手续费
            finalMoney:0,  //到账金额
            checked:0,
            personName:''           
        }
    },
    mounted(){
        this.confirm();
       /* console.log("type值")
        console.log(this.type)*/
    },
    methods:{
        //支付宝账号验证
        checkFetchAccount(){
            //过滤特殊字符
            //this.fetchAccount = this.fetchAccount.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\(>^ω^<)喵\^(*￣(oo)￣)^\$]/g,'') 
            var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
            if(regStr.test(this.fetchAccount)){
               this.fetchAccount=this.fetchAccount.replace(regStr,"");
            }
        },
        // 获取可提现的金额
        confirm(){
            let params = {
                type:this.type
            }
            apiHttp.apiCenter.getYueDetail(this.type,params,resp=>{
                if(resp.code==403){                                                     
                    this.$dialog.alert({
                        title:'提示',
                        message: "请先完成实名认证！",
                        confirmButtonText:"我知道了"
                    }).then(() => { 
                        //跳到实名认证页面
                        this.$router.push("/identity");
                    }).catch(() => {
                        // on cancel
                    })           
                }             
                if(resp.code == 200){
                    this.canCarry = `￥${resp.data.income}`
                    this.canCarry1 = `${resp.data.recharge}`
                    this.checked = resp.data.checked; 
                    this.fetchAccount = resp.data.fetchAccount;
                    this.personName = resp.data.personName;                              
                }else{
                    Toast(resp.message)
                }               
            })
        },
        //获取可提现的金额的手续费
        getCharge(){
            if(this.money > 0){
                let params = {
                    money:this.money,
                    type:this.type
                }
                apiHttp.apiCenter.fetchCost(this.money,this.type,params,resp=>{                           
                    if(resp.code == 200){
                        this.charge = resp.data.needPay;
                        this.finalMoney = resp.data.finalMoney;
                    }else{
                        Toast(resp.message)
                    } 
                })
            }else{
                this.charge = 0
                this.finalMoney = 0
            }
            
        },
        // 监听提现的金额不能大于可提金额和不能小于0
        numMoney(){
            if(this.type==41){
                if(Number(this.money) > Number(this.canCarry1)){
                    this.money = this.canCarry1
                }else if(this.money<100){
                    //this.money = 0
                    Toast("提现的金额不能小于100元")
                }
            }else if(this.type==40){
                if(Number(this.money) > Number(this.canCarry)){
                    this.money = this.canCarry
                }else if(this.money<100){
                    //this.money = 0
                    Toast("提现的金额不能小于100元")
                }
            }

        },
        //提交提现申请
        fetchOut(){
            if(this.fetchAccount ==null||this.fetchAccount==''||this.fetchAccount==undefined){
                Toast("请先填写支付宝账号！")
                return                 
            }
            if(this.personName ==null||this.personName==''||this.personName==undefined){
                 Toast("请先填写真实姓名！")
                 return                 
            }

            if(this.money==0){
                Toast("提现金额不能小于100元！")
                return
            }
                if(this.checked==0){                        
                    //调用提现资料补全接口
                    let params = {
                        fetchAccount:this.fetchAccount,
                        fetchType:1,
                        personName:this.personName
                    }
                    apiHttp.apiCenter.fetchData(params,resp=>{                                   
                        if(resp.code==200){
                            let params = {
                                money:this.money,
                                type:this.type
                            }
                            apiHttp.apiCenter.fetchOut(params,resp=>{                                                     
                                if(resp.code==200){                               
                                    this.$dialog.alert({
                                        title:'提示',
                                        message: "您好！提现申请已经成功提交，3-5个工作日内到账！",
                                        confirmButtonText:"我知道了",
                                    }).then(() => { 
                                        this.confirm();
                                        this.money = '';
                                        this.charge = 0;
                                        this.finalMoney = 0;                                
                                    })                                
                                }else{
                                    Toast(resp.message);
                                }
                            }) 
                        }else{
                        Toast(resp.message) 
                        }
                        
                    })
                }else{
                    let params = {
                        money:this.money,
                        type:this.type
                    }
                    apiHttp.apiCenter.fetchOut(params,resp=>{                                                  
                        if(resp.code==200){
                            this.$dialog.alert({
                                title:'提示',
                                message: "您好！提现申请已经成功提交，3-5个工作日内到账！",
                                confirmButtonText:"我知道了", 
                            }).then(() => { 
                                this.confirm();
                                this.money = '';
                                this.charge = 0; 
                                this.finalMoney = 0;                            
                            })
                        }else{
                            Toast(resp.message);
                        }
                    }) 
                }                                 
        },
        //弹出修改提示框
        editPop(){
            this.$dialog.alert({
                title:'提示',
                message: "修改账户请联系客服！",
                confirmButtonText:"我知道了"
            }).then(() => { 
               
            }).catch(() => {
                // on cancel
            })
        }
    }
}
</script>

<style scoped>
.edit-icon{
    margin-top: 0.5rem;
    height: 0.8rem;
    float: right;
    padding: 0rem 0.5rem;
    background: #fff;
    border-radius: 1rem;
    border: 0.04rem solid rgb(233, 231, 231);    
}
.edit-icon>img{
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.2rem;
    position: relative;
    bottom: 0.5rem;
}
.edit-icon>em{    
    position: relative;
    bottom: 0.55rem;
}
.fliexData{
    margin-left: 0.3rem;
}
.center-all-img{
    padding: .6rem;
}
.income-title{
    height: 1.36rem;
    line-height: 1.36rem;
    color:#000;
}
.icon_return{
    width: 1rem;
    margin-top: .1rem;
}
.balance-ul{
    width: 100%;
}
.balance-ul li{
    width: calc(100% - 1.2rem);
    color: #323333;
    height: 2rem;
    line-height: 2rem;
    padding: 0 .6rem;
    border-bottom:solid 1px #eee;
}
.balance-ul li input{
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}
.balance-ul li input::-webkit-input-placeholder{
    font-size: .46rem;
}
.color-999899{
    color:#999899 !important;
}
.color-323333{
    color:#323333 !important;
}
.border-bottom{
    border-bottom:#EEE solid .4rem !important;
}
.wxts{
    padding: .6rem;
}
.wxts span{
    display: block;
    line-height: 1rem;
    color:#999999;
}
.wxts span:nth-child(1){
    color:#333333;
}
</style>

